:root {
  --miku-primary: #39C5BB;    /* 初音蓝绿色 - 信息提示 */
  --miku-success: #22c55e;   /* 初音绿色 - 成功提示 */
  --miku-warning: #f59e0b;   /* 初音黄色 - 警告提示 */
  --miku-error: #ef4444;     /* 初音红色 - 错误提示 */
  --miku-secondary: #7C3AED; /* 初音紫色 - 辅助色 */
  --miku-dark: #0F766E;      /* 初音深色 */
}

/* 基础Alert样式 - 确保相对定位让闪光效果可以定位 */
.miku-alert {
  border-radius: 10px !important;
  position: relative; /* 关键：确保闪光效果可以绝对定位 */
  overflow: hidden;
  border-width: 2px !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 内容容器 - 确保在闪光效果之上 */
.miku-alert .ant-alert-content {
  position: relative;
  z-index: 2; /* 高于闪光效果的z-index */
  padding: 12px 16px !important; /* 增加内边距避免内容被闪光覆盖 */
}

/* 文本样式固定 */
.miku-alert .ant-alert-message,
.miku-alert .ant-alert-description {
  transition: none !important;
}

/* 不同类型的核心样式 */
.miku-alert-info {
  border-color: var(--miku-primary) !important;
  background-color: rgba(57, 197, 187, 0.08) !important;
}

.miku-alert-success {
  border-color: var(--miku-success) !important;
  background-color: rgba(34, 197, 94, 0.08) !important;
}

.miku-alert-warning {
  border-color: var(--miku-warning) !important;
  background-color: rgba(245, 158, 11, 0.08) !important;
}

.miku-alert-error {
  border-color: var(--miku-error) !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
}

/* 图标颜色 */
.miku-alert-info .anticon { color: var(--miku-primary) !important; }
.miku-alert-success .anticon { color: var(--miku-success) !important; }
.miku-alert-warning .anticon { color: var(--miku-warning) !important; }
.miku-alert-error .anticon { color: var(--miku-error) !important; }

/* 标题颜色 */
.miku-alert-info .ant-alert-message { color: var(--miku-dark) !important; }
.miku-alert-success .ant-alert-message { color: #15803d !important; }
.miku-alert-warning .ant-alert-message { color: #92400e !important; }
.miku-alert-error .ant-alert-message { color: #b91c1c !important; }

/* 关闭按钮 */
.miku-alert .ant-alert-close-icon {
  color: var(--miku-secondary) !important;
  transition: all 0.2s ease;
  z-index: 3; /* 确保在所有元素之上 */
  position: relative;
}

.miku-alert .ant-alert-close-icon:hover {
  color: var(--miku-primary) !important;
  transform: rotate(90deg) scale(1.2);
}

/* 发光效果 */
.miku-glow.miku-alert-info { box-shadow: 0 0 10px var(--miku-primary), 0 0 20px rgba(57, 197, 187, 0.2); }
.miku-glow.miku-alert-success { box-shadow: 0 0 10px var(--miku-success), 0 0 20px rgba(34, 197, 94, 0.2); }
.miku-glow.miku-alert-warning { box-shadow: 0 0 10px var(--miku-warning), 0 0 20px rgba(245, 158, 11, 0.2); }
.miku-glow.miku-alert-error { box-shadow: 0 0 10px var(--miku-error), 0 0 20px rgba(239, 68, 68, 0.2); }

/* 脉冲动画 */
.miku-pulse { animation: pulse 2.5s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(57, 197, 187, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 15px rgba(57, 197, 187, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 197, 187, 0); transform: scale(1); }
}

/* 悬浮效果 */
.miku-hover { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.miku-hover:hover { transform: translateY(-4px) scale(1.01); border-width: 2px !important; }
.miku-hover.miku-alert-info:hover { box-shadow: 0 8px 24px rgba(57, 197, 187, 0.3); border-color: #2dd4bf !important; }
.miku-hover.miku-alert-success:hover { box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3); border-color: #16a34a !important; }
.miku-hover.miku-alert-warning:hover { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3); border-color: #d97706 !important; }
.miku-hover.miku-alert-error:hover { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3); border-color: #dc2626 !important; }

/* 修复的闪光特效 - 确保清晰可见 */
.miku-shine::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  /* 增强闪光强度和对比度 */
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.5), /* 提高透明度让闪光更明显 */
    transparent
  );
  transform: rotate(30deg);
  animation: shine 2s infinite;
  z-index: 1; /* 确保在背景之上，内容之下 */
  pointer-events: none;
}

/* 为不同类型调整闪光颜色，增强风格统一性 */
.miku-alert-info.miku-shine::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(57, 197, 187, 0.3),
    transparent
  );
}

.miku-alert-success.miku-shine::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(34, 197, 94, 0.3),
    transparent
  );
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}
    